/**
 * 动画工具
 * @author wxqqh@qq.com
 */
window.CardLove = window.CardLove || {};
/**
 * 动画对象
 * <pre>
 * (new CardLove.Effect('test',function(){console.log(1);})).translate(10,10).translate(300,300).rotate(90).duration(500).start();
 *	</pre>	
 * @type 
 */
CardLove.Effect = window.Effect || function(ele, callback) {
	this.ele = ele;
	this._props = [];
	this.cssText = this.ele.style.cssText;
	this._duration = CardLove.Effect._config.duration;
	this._transform =[];
	this.listener = {
		start : CardLove.Effect.emptyFn,
		end : CardLove.Effect.emptyFn
	};
	this.ele.addEventListener('webkitTransitionEnd', callback, false);
};
/**
 * 空函数
 */
CardLove.Effect.emptyFn = function() {
};
/**
 * 配置
 * @type 
 */
CardLove.Effect._config = {
	duration : 500
};
/**
 * 将属性压栈
 * @param {String} prop 属性名
 * @param {String} val 属性
 * @return {CardLove.Effect}
 */
CardLove.Effect.prototype._setProperty = function(prop, val) {
	this._props[prop] = val;
	return this;
};
/**
 * 做属性兼容
 * 
 * @param {String} prop 属性名
 * @param {String} val 属性
 * @return {CardLove.Effect}
 */
CardLove.Effect.prototype._setVendorProperty = function(prop, val) {
	this._setProperty('-webkit-' + prop, val);
	this._setProperty('-moz-' + prop, val);
	this._setProperty('-ms-' + prop, val);
	this._setProperty('-o-' + prop, val);
	return this;
};
/**
 * 把所有的属性设置到dom节点上
 * 
 * @return {CardLove.Effect}
 */
CardLove.Effect.prototype._effectPropertys = function() {
	var props = this._props, el = this.ele;
	for (var prop in props) {
		if (props.hasOwnProperty(prop)) {
			el.style.setProperty
					? el.style.setProperty(prop, props[prop], '')
					: el.style[prop] = props[prop];
		}
	}
	return this;
};
/**
 * 设置transform
 * @param {String} prop 属性名
 * @return {CardLove.Effect}
 */
CardLove.Effect.prototype.transform = function(prop){
	this._transform.push(prop);
	return this;
};
/**
 * 设置translate
 * @param {Number} x X坐标
 * @param {Number} y Y坐标
 * @return {CardLove.Effect}
 */
CardLove.Effect.prototype.translate = function(x, y) {
	return this.transform('translate(' + (x || 0) + 'px, ' + (y || 0) + 'px)');
};
/**
 * 旋转角度
 * @param {Number} deg 角度
 * @return {CardLove.Effect}
 */
CardLove.Effect.prototype.rotate = function (deg) {
     return this.transform('rotate('+ deg +'deg)');
};

/**
 * 变换动画的长度
 * @param {Number} duration
 * @return {CardLove.Effect}
 */
CardLove.Effect.prototype.duration = function(duration) {
	this._duration = duration;
	this._setVendorProperty('transition-duration', this._duration + 'ms');
	return this;
};
/**
 * 动画开始
 * @param {Function} fn 开始回调
 * @return {CardLove.Effect}
 */
CardLove.Effect.prototype.start = function(fn) {
	if (this._transform.length > 0) {
                this._setVendorProperty('transform', this._transform.join(' '));
	}
	this._effectPropertys();
	fn && fn();
	return this;
};
